var dataInt = {
    "data": [
        { "src": ".././images/ (1).jpg" },
        { "src": ".././images/ (2).jpg" },
        { "src": ".././images/ (3).jpg" },
        { "src": ".././images/ (4).jpg" },
        { "src": ".././images/ (5).jpg" },
        { "src": ".././images/ (6).jpg" },
        { "src": ".././images/ (7).jpg" },
        { "src": ".././images/ (8).jpg" },
        { "src": ".././images/ (9).jpg" },
        { "src": ".././images/ (10).jpg" },
        { "src": ".././images/ (11).jpg" },
        { "src": ".././images/ (12).jpg" },
        { "src": ".././images/ (13).jpg" },
        { "src": ".././images/ (14).jpg" },
    ]
}
$(window).on('load', function() {
    $(window).on('scroll', function() {
        if (checkScrollSlide()) {
            $.each(dataInt.data, function(key, value) {
                var obox = $('<div>').addClass('box').appendTo($('#main'));
                var opic = $('<div>').addClass('pic').appendTo($(obox));
                $('<img>').attr('src', 'images/' + $(value).attr('src')).appendTo($(opic));
            })
        }
    })

})


function checkScrollSlide() {
    var $lastBox = $('#main>div').last();
    var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2)
    var scrollTop = $(window).scrollTop();
    var documentH = $(window).height();
    return (lastBoxDis < scrollTop + documentH) ? true : false;
}